<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../day09/jquery.min.js"></script>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="active box">我是div</div>
    <input type="text" class="myInput" />
    <script>
      // 一、类名操作
      // className  classList
      // 1.添加类名  addClass("类名");
      //   $(document).click(function () {
      //     $("div").addClass("active");
      //   });
      // 2.移除类名  removeClass("类名");
      //   $(document).click(function () {
      //     $("div").removeClass("active");
      //   });

      // 3.判断元素是否拥有某个类名 hasClass("类名");
      // $(document).click(function(){
      //    let res =   $("div").hasClass("active1");
      //    console.log(res);
      // })

      // 4.可以切换类名 ：toggleClass();如果有类名就删除这个类名 如果没有类名就添加这个类名；
      // $(document).click(function(){
      //     $(".box").toggleClass("active");
      // })

      // 二、文本操作；
      // 原生都是 赋值操作 和属性操作 jq都是方法；
      // document.querySelector(".box").innerHTML
      // document.querySelector(".box") = function(){}
      // 1.可以获取或者设置 超文本；
      // 获取超文本html
      $(document).click(function () {
        let res = $(".box").html();
        console.log(res);
      });
      // 设置超文本
      // $(document).click(function(){
      // //   let res =   $(".box").html();
      // //   console.log(res);
      // $(".box").html("<h1>我是标题</h1>");
      // })

      // 2.操作文本 ： 1.获取文本  2.设置文本
      // 1.获取文本
      // $(document).click(function(){
      //     let res =  $(".box").text();
      //     console.log(res);
      // })

      // $(document).click(function(){
      //       $(".box").text("<h1>123</h1>");
      // })

      // 三、获取或者设置 标签的值 ；
      // 获取
      // $(document).click(function(){
      //    let res =  $(".myInput").val();
      //    console.log(res);
      // })

      // 设置
      // $(document).click(function(){
      //  $(".myInput").val("yyds");
      // })
    </script>
  </body>
</html>
